<template>
    <view class="conbox">
        <view class="bgbox">
            <view class="bgimg">
                <image class="banner" src="/static/me/banner.jpg" mode="widthFix"></image>
            </view>
        </view>
        <view class="person_info_box">
            <view class="person_info">
                <view class="avatar">
                    <image :src="othersData.viewMyProfile.recruitVo.userHeaderImage" mode="widthFix"></image>
                </view>
                <view class="info">
                    <view class="nickname">{{othersData.viewMyProfile.recruitVo.userNickname}}
                        <image :src="sexIconSrc[othersData.viewMyProfile.recruitVo.userSex]" mode="widthFix"></image>
                    </view>
                    <view class="tel_box">
                        <text class="tel">{{othersData.viewMyProfile.recruitVo.userPhone}}</text>
                        <text class="certify">{{othersData.viewMyProfile.authenticationStatu}}</text>
                    </view>
                </view>
                <view class="add_attention" ref="atn" @click="isAttention">
                    +{{othersData.viewMyProfile.isConcerned}}
                </view>
            </view>
            <view class="introduce">{{othersData.viewMyProfile.recruitVo.userDescribe}}</view>
            <view class="otherinfobox">
                <view class="otherinfo">
                    <text class="num">{{othersData.viewMyProfile.likeNum}}</text>
                    关注
                </view>
                <view class="otherinfo">
                    <text class="num">{{othersData.viewMyProfile.fansNum}}</text>
                    粉丝
                </view>

                <view class="otherinfo">
                    <text class="num">{{othersData.viewMyProfile.collectionNum}}</text>
                    收藏
                </view>
            </view>
        </view>
        <view class="info_box">
            <view class="single_info_box" v-for="(item,index) in othersData.dynamicVos" :key="item.dynamicId">
                <view class="title_box">
                    <view class="ava_box">
                        <view class="avatar">
                            <image class="userHeaderImg" :src="othersData.viewMyProfile.recruitVo.userHeaderImage" mode="widthFix"></image>
                        </view>
                        <view class="name">
                            {{othersData.viewMyProfile.recruitVo.userNickname}} 
                        </view>
                        <image class="sexIcon" :src="sexIconSrc[othersData.viewMyProfile.recruitVo.userSex]" mode="widthFix"></image>
                        
                    </view>
                    <view class="single_date">{{item.displayTime}}</view>
                </view>
                <view class="single_collection" @click="goOthersDetailpage(item.dynamicId)">{{item.dynamicDescribe}}</view>
                <view class="img_box">
                    <view class="single_img_box" v-for="(item1,index1) in item.dynamicImage" :key="index1">
                        <image class="img_info" :src="item1.dynamicImage" mode="widthFix"></image>
                    </view>
                   
                </view>
                <view class="behavior_box">
                    <view class="single_behavior" @click="addlove" ref='love'>
                        <view class="behavior_icon">
                            <image src="/static/icon/img_icon36.png@2x.png" mode="widthFix"></image>
                        </view>
                        <text class="num">{{item.collectionNum}}</text>
                    </view>
                    <view class="single_behavior" @click="addcomment" ref='comment'>
                        <view class="behavior_icon">
                            <image src="/static/icon/img_icon5.png@2x.png" mode="widthFix"></image>
                        </view>
                        <text class="num comment_icon">{{item.commentNum}}</text>
                    </view>
                    <view class="single_behavior" @click="addHeart" ref="heart">
                        <view class="behavior_icon">
                            <image src="/static/icon/img_icon6.png@2x.png" mode="widthFix"></image>
                        </view>
                        <text class="num">{{item.pickNum}}</text>
                    </view>
                </view>
            </view>
            <view class="top"></view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                userId: "",
                othersData: {
                    viewMyProfile: {
                        recruitVo: {}
                    }
                },
                sexIconSrc: {
                    "男": "/static/icon/img_icon19.png@2x.png",
                    "女": "/static/icon/img_icon20.png@2x.png"
                }
            }
        },
        methods: {
            //请求他人主页数据
            getOthersData() {
                this.$request('/comic-time/personal/viewOtherProfile', {
                    "userId": this.userId
                }, 'POST', {
                    // 'Authorization': token,
                }).then(res => {
                    console.log(res)
                    this.othersData = res.data
                });
            },
            //去详情页
            goOthersDetailpage(id) {
                uni.navigateTo({
                    url: '/pages/contribute/details?id=' + id
                });
            },
        },
        mounted() {
            this.getOthersData()
        },
        onLoad(options) {
            // console.log(options)
            this.userId = options.userId
        }
    }
</script>

<style lang="scss" scoped>
    .conbox {
        width: 100%;
        height: 100vh;
        background-color: #eeeeee;
        position: relative;


        .bgbox {
            width: 750rpx;
            height: 500rpx;
            background-color: #ffffff;
            border-bottom: 10rpx solid #e5e5e5;
            border-radius: 0rpx 0rpx 10rpx 10rpx;

            .bgimg {
                width: 750rpx;
                height: 300rpx;
                background-color: #61dcca;

                .banner {
                    width: 750rpx;
                }
            }
        }

        .person_info_box {
            position: absolute;
            top: 142rpx;
            left: 77rpx;
            width: 600rpx;
            height: 319rpx;
            background-color: #ffffff;
            box-shadow: 0rpx 2rpx 24rpx 0rpx rgba(0, 0, 0, 0.1);
            border-radius: 10rpx;


            .person_info {
                height: 155rpx;
                width: 600rpx;

                .avatar {
                    width: 100rpx;
                    height: 100rpx;
                    background-color: #ffffff;
                    border: solid 1rpx #eeeeee;
                    border-radius: 50%;
                    overflow: hidden;
                    position: absolute;
                    top: 35rpx;
                    left: 20rpx;

                    image {
                        width: 100rpx;
                        height: 100rpx;
                    }
                }

                .info {
                    width: 184rpx;
                    height: 70rpx;
                    position: absolute;
                    top: 58rpx;
                    left: 143rpx;
                    // display:flex;

                    .nickname {
                        width: 250rpx;
                        height: 40rpx;
                        font-family: PingFangSC-Medium;
                        font-size: 32rpx;
                        line-height: 40rpx;
                        color: #000000;
                    }

                    image {
                        width: 31rpx;
                        height: 31rpx;
                        margin-left: 10rpx;
                    }

                    .tel_box {
                        width: 244rpx;
                        height: 30rpx;
                        font-family: PingFangSC-Regular;
                        font-size: 24rpx;
                        line-height: 30rpx;
                        color: #999999;
                        display: flex;

                        .tel {
                            margin-right: 10rpx;
                        }

                        .certify {
                            color: #666666;
                        }
                    }
                }

                .add_attention {
                    // width: 86rpx;
                    height: 40rpx;
                    background-color: #ff6262;
                    border-radius: 10rpx;
                    text-align: center;
                    box-sizing: border-box;
                    padding: 0 5rpx;
                    font-family: PingFangSC-Medium;
                    font-size: 24rpx;
                    line-height: 40rpx;
                    color: #ffffff;
                    position: absolute;
                    top: 76rpx;
                    left: 491rpx;
                }
            }

            .introduce {
                width: 100%;
                height: 26rpx;
                font-family: PingFangSC-Regular;
                font-size: 20rpx;
                line-height: 21rpx;
                color: #666666;
                box-sizing: border-box;
                padding-left: 32rpx;
            }

            .otherinfobox {
                width: 100%;
                height: 138rpx;
                display: flex;
                justify-content: space-around;
                align-items: center;

                .otherinfo {
                    height: 58rpx;
                    font-family: PingFangSC-Regular;
                    font-size: 24rpx;
                    line-height: 36rpx;
                    color: #666666;

                    .num {
                        display: block;
                        font-family: PingFangSC-Regular;
                        font-size: 36rpx;
                        line-height: 36rpx;
                        color: #000000;
                        text-align: center;
                    }
                }
            }
        }

        .info_box {
            width: 750rpx;

            .single_info_box {
                width: 750rpx;
                // height: 437rpx;
                border-bottom: 10rpx solid #e5e5e5;
                background-color: #ffffff;
                box-sizing: border-box;
                padding: 20rpx 30rpx;

                .title_box {
                    height: 77rpx;
                    width: 692rpx;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .ava_box {
                        height: 77rpx;
                        // width: 246rpx;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        .avatar {
                            width: 60rpx;
                            height: 60rpx;
                            background-color: #1389cd;
                            border-radius: 50%;
                            overflow:hidden;
                            margin-right:15rpx;
                            
                            .userHeaderImg{
                                width: 60rpx;
                                height: 60rpx;
                            }
                        }

                        .name {
                            height: 27rpx;
                            // width: 500rpx;
                            font-family: PingFangSC-Medium;
                            font-size: 28rpx;
                            line-height: 27rpx;
                            color: #000000; 
                            margin-right:10rpx;
                        }
                        .sexIcon{
                                 height: 27rpx;
                                 width: 27rpx;
                            }
                    }

                    .single_date {
                        // width: 111rpx;
                        height: 20rpx;
                        font-family: PingFangSC-Regular;
                        font-size: 20rpx;
                        font-weight: normal;
                        font-stretch: normal;
                        line-height: 20rpx;
                        letter-spacing: 0rpx;
                        color: #999999;
                    }
                }

                .single_collection {
                    width: 692rpx;
                    font-family: PingFangSC-Regular;
                    font-size: 24rpx;
                    line-height: 57rpx;
                    color: #333333;
                    align-items: center;
                    text-align: justify; 
                }

                .img_box {
                    // height: 222rpx;
                    width: 692rpx;
                    display: flex;
                    justify-content: flex-start;
                    flex-wrap:wrap;
                    align-items: center;

                    .single_img_box {
                        width: 223rpx;
                        // height: 222rpx;
                        margin-right:10rpx;
                        margin-bottom:10rpx;
                        background-color: #1389cd;
                        border-radius: 10rpx;
                        border: solid 1rpx #e5e5e5;
                        overflow:hidden;
                        .img_info{
                            width: 223rpx;
                            height: 222rpx;
                        }
                    }
                    .single_img_box:nth-child(3n){
                        margin-right:0rpx !important;
                    }
                }

                .behavior_box {
                    height: 60rpx;
                    width: 692rpx;
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                    .single_behavior {
                        width: 223rpx;
                        height: 48rpx;
                        font-family: PingFangSC-Regular;
                        // text-align: center;;
                        font-size: 24rpx;
                        line-height: 48rpx;
                        display: flex;
                        justify-content:center;
                        color: #666666;

                        .behavior_icon {
                            margin-right: 10rpx;
                            image{
                                width: 25rpx;
                                height: 24rpx;
                            }
                        }

                        // .comment_icon {
                        //     color: #666666;
                        // }
                    }
                }
            }
        }
    }
</style>
